<template>
  <div class="coupon-card">
    <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
      <el-form-item label="制券商户" prop="createCouponMch">
        <!-- <el-select class="common-content-width" disabled v-model="form.createCouponMch" placeholder="请选择制券商户">
          <el-option :label="item.dictName" v-for="item in createMerchantList" :value="item.dictValue" :key="item.id" />
        </el-select> -->
        <el-input class="common-content-width" disabled v-model="form.createCouponMch"></el-input>
      </el-form-item>
      <el-form-item label="发券公众号">
        <el-input class="common-content-width" disabled v-model="form.sendAppId"></el-input>
        <!-- <el-select class="common-content-width" disabled v-model="form.sendAppId" placeholder="请选择发券公众号">
          <el-option :label="item.dictName" v-for="item in issueCouponList" :value="item.dictValue" :key="item.id" />
        </el-select> -->
      </el-form-item>
      <el-form-item label="是否插入卡包" prop="needInsertPack">
        <el-radio-group v-model="form.needInsertPack" disabled style="width: 360px;">
          <el-radio v-for="item in packRadioList" :key="item.label" :label="item.label">
            {{
              item.name
            }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input class="common-content-width" placeholder="请输入商品名称" v-model="form.name" maxlength="100" show-word-limit
        disabled />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">

interface IdialogData {
  showCouponMchForm: boolean;
  labels: string[],
  title: string,
  typeData: 1 | 2,
  list: any[]
}

const formRef = ref()
const createMerchantList = ref([])
const issueCouponList = ref([])

const radioList = ref([
  { id: "fixed", name: "固定时间" },
  { id: "relatively", name: "相对时间" },
  { id: "dayEnd", name: "当天失效" },
  { id: "weekEnd", name: "周末失效" },
  { id: "monthEnd", name: "月末失效" },
  { id: "yearEnd", name: "年末失效" },
]);

const packRadioList = [
  {
    label: -1,
    name: "不插入"
  }, {
    label: 0,
    name: "邮件申请插入"
  }, {
    label: 1,
    name: "前端插件插入"
  }
]


const form = reactive({
  createCouponMch: "",
  needInsertPack: 0,
  sendAppId: '',
  // expireType: 'fixed',
  name: ''
})
const rules = {
  createCouponMch: [{
    required: true,
    message: "请选择制券商户",
    trigger: "blur"
  }],
  needInsertPack: [{
    required: true,
    message: "请选择",
    trigger: "blur"
  }],
  expireType: [{
    required: true,
    message: "请选择",
    trigger: "blur"
  }], name: [{
    required: true,
    message: "请输入商品名称",
    trigger: "blur"
  }]

}

const dialogData = reactive<IdialogData>({
  showCouponMchForm: false,
  labels: [],
  title: '',
  typeData: 1,
  list: []
})

// const getCreateCouponList = async () => {
//   const res = await getConfigCoupon({
//     dictType: 'createCouponMch'
//   })
//   if (res.code == 200) {
//     createMerchantList.value = res.payload ?? []
//   }
// }
// const getIssueCouponList = async () => {
//   const res = await getConfigCoupon({
//     dictType: 'issueCoupon'
//   })
//   if (res.code == 200) {
//     issueCouponList.value = res.payload ?? []
//   }
// }


const validForm = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate((valid: boolean) => {
      if (valid) {
        resolve(form)
      } else {
        reject()
      }
    })

  })
}

const getFormData = (data: any, name: string) => {
  if (data) {
    const val = JSON.parse(data)
    form.createCouponMch = val.createCouponMch
    form.needInsertPack = val.needInsertPack
    form.sendAppId = val.sendAppId
    form.name = name
  }
}


onMounted(() => {
  // getCreateCouponList()
  // getIssueCouponList()

})

defineExpose({
  validForm,
  getFormData
})

</script>
<style lang="scss" scoped>
.coupon-card {
  width: 100%;
}

.btn {
  margin-left: 12px;
  font-size: 20px;
}


.common-content-width {
  width: 300px;
}
</style>